<!--

Simple usage:

<Switch label="This is a toggle" bind:value="toggleValue">
    <p>This content will show up if the switch is turned on</p>
</Switch>

You can disable the switch using the `disabled` property:

<Switch
    label="This is a toggle"
    bind:value="toggleValue"
    disabled="checkDisabled()">
</Switch>

Sometimes it's useful to tell the user WHY a switch is disabled.
That's what the `disabled_msg` attribute is for:

<Switch
    label="This is a toggle"
    bind:value="toggleValue"
    disabled="checkDisabled()"
    disabled_msg="This is disabled because we say so">
</Switch>

Also, when we are disabling a switch, sometimes we still internally
decide whether or not to interpret the disabled state as toggled
on or off. It might make sense to indicate this to the user by
forcing the switch state to "on" or "off" in case it is disabled.

<Switch
    label="This is a toggle"
    bind:value="toggleValue"
    disabled="checkDisabled()"
    disabled_state="on">
</Switch>
-->

<div class="control-group vis-option-group vis-option-type-switch {highlight?'highlight':''}">
    {#if hasHelp}
    <Help>
        <slot name="help"></slot>
    </Help>
    {/if}
    <label class="switch-outer {disabled? 'disabled' :''}" style="padding-left: 40px">
        <label class="switch">
            <input
                class="{disabled && disabled_state == 'on' ? 'disabled-force-checked' : disabled && disabled_state == 'off' ? 'disabled-force-unchecked' : ''}"
                disabled="{disabled}"
                bind:checked="value "
                type="checkbox"
            /><span class="slider round"></span>
        </label>
        {@html label }
    </label>
    {#if disabled && disabled_msg}
    <div transition:slide>
        <div class="disabled-msg">
            {@html disabled_msg}
        </div>
    </div>
    {:else} {#if (!disabled || disabled_state == 'on') && value}
    <div transition:slide>
        <div class="switch-content">
            <slot></slot>
        </div>
    </div>
    {/if} {/if}
</div>

<style lang="less">
    .vis-option-type-switch {
        padding-top: 8px;
        margin-top: 0px;
        padding-bottom: 3px;
        margin-bottom: 5px !important;
        transition: height 0.2s ease-in-out;
        background: #ffffff00;
        &.highlight {
        }
    }

    .vis-option-type-switch + .vis-option-type-switch,
    :global(.vis-option-type-switch + .help + .vis-option-type-switch) {
        border-top: 1px solid #ddd;
    }

    .switch-content > :first-child {
        padding-top: 5px;
    }
    .switch-content > :last-child {
        padding-bottom: 3px;
    }
    .switch-content,
    .disabled-msg {
        padding: 0 0 0px 40px;
    }

    .disabled-msg {
        font-size: 11px;
        padding-top: 0;
        padding-bottom: 5px;
        font-style: italic;
        color: #a8a8a8;
        line-height: 1.2;
    }

    /* The switch - the box around the slider */
    .switch {
        position: absolute;
        display: inline-block;
        width: 30px;
        left: 2px;
        top: 8px;
        height: 16px;
    }

    .switch-outer.disabled {
        color: #888;
    }

    /* Hide default HTML checkbox */
    .switch input {
        display: none;
    }

    /* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: 0.2s;
        transition: 0.2s;
    }

    .slider:before {
        position: absolute;
        content: '';
        height: 12px;
        width: 12px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: 0.2s ease-in-out;
        transition: 0.2s ease-in-out;
    }

    input:checked + .slider {
        background-color: #18a1cd;
    }

    input:checked:disabled + .slider {
        background-color: #ccc;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #18a1cd;
    }

    input.disabled-force-checked + .slider:before,
    input:checked + .slider:before {
        -webkit-transform: translateX(13px);
        -ms-transform: translateX(13px);
        transform: translateX(13px);
    }

    input.disabled-force-unchecked + .slider:before {
        -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 16px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
</style>

<script>
    import slide from 'svelte-transitions-slide';
    import Help from '../editor/Help.html';

    export default {
        components: { Help },
        data() {
            return {
                hasHelp: false,
                disabled_msg: '',
                disabled_state: 'auto',
                disabled: false,
                highlight: false
            };
        },
        transitions: { slide },
        oncreate() {
            this.set({
                hasHelp: this.options && this.options.slots ? !!this.options.slots.help : false
            });
        },
        onstate({ changed, current }) {
            if (changed.value && current.value) {
                this.set({ highlight: true });
                setTimeout(() => {
                    this.set({ highlight: false });
                }, 300);
            }
        }
    };
</script>
